<template>

  <mk-page type="button-view" title="button">
    <div slot="content">
      <form action="/">
        <div class="page-button-group">
          <mk-button size="large">Button</mk-button>
          <mk-button size="large" disabled>Button</mk-button>
          <mk-button size="large" outline>Button</mk-button>
          <mk-button size="large" outline disabled>Button</mk-button>
        </div>
        <div class="page-button-group">
          <mk-button type="orange">Button</mk-button>
          <mk-button type="dark" size="large" disabled>Button</mk-button>
          <mk-button type="dark" size="small" outline>Button</mk-button>
          <mk-button type="dark" outline>Button</mk-button>
        </div>
        <div class="page-button-group">
          <mk-button type="blue" size="large">Button</mk-button>
          <mk-button type="blue" size="large" disabled>Button</mk-button>
          <mk-button type="blue" size="large" outline>Button</mk-button>
          <mk-button type="blue" size="large" outline disabled>Button</mk-button>
        </div>
        <div class="page-button-group">
          <mk-button type="vice" size="large">Button</mk-button>
          <mk-button type="vice" size="large" disabled>Button</mk-button>
          <mk-button icon="mkic-ok" type="vice" size="large">Button</mk-button>
          <mk-button icon="mkic-round-border" size="large">Button With Icon</mk-button>
          <mk-button icon="mkic-info">Button With Icon</mk-button>
          <mk-button>
            <img src="../assets/logo.png" height="20" width="20" slot="icon"> 带自定义图标
          </mk-button>
        </div>
      </form>
    </div>
  </mk-page>
</template>
<style lang="scss" >
@import '~assets/stylesheets/main';

.page-button {
  padding: 0 15px 15px;
}
.page-button-group {
  margin-bottom: 15px;
}
.page-button-group > * {
  margin-bottom: 15px;
}
</style>
<script>
import MkPage from '../components/mk-page.vue'
export default {
  name: 'demo-button',
  data() {
    return {}
  },
  mounted() {},
  components: {
    MkPage
  },
  watch: {},
  methods: {
    test1() {
      let self = this
      self.$showdownbutton(
        {
          message: 'button 测试！',
          leftBtnTxt: '确定',
          rightBtnTxt: '取消'
        },
        function() {
          console.log('这是回调')
        }
      )
    }
  }
}
</script>
